<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        width:'100%',
        height: statusBarHeight + 'px',
        background:'white',
        position:'fixed',
        top:0,
        zIndex:100,
      }"
    >
    </view>
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
        background:'white',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#444444"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class=""> 打卡 </view>
    </view>
    <u--form
      labelPosition="left"
      labelWidth="200rpx"
      :model="model1"
      ref="uForm"
      class="form_view"
      :style="{marginTop:statusBarHeight+'px'}"
    >
      <view class="title">
        <view class="title_top">{{ detail.title }}</view>
        <view class="title_time"
          >{{ detail.start_time }} 至 {{ detail.end_time }}</view
        >
      </view>
      <u-form-item labelPosition="top" prop="content" ref="item2" borderBottom>
        <u--textarea
          border="none"
          style="margin-top: 16rpx"
          v-model="model1.userInfo.content"
          placeholder="请输入打卡内容"
          height="204"
        ></u--textarea>
      </u-form-item>
      <view class="props">
        <view class="props_up">
          <u-upload
            :use-before-read="true"
            :fileList="fileList1"
            @afterRead="afterRead($event, 1)"
            @beforeRead="beforeRead"
            name="1"
            :previewImage="false"
          >
            <view class="up">
              <image
                style="width: 48rpx; height: 48rpx"
                src="@/static/images/icon_cjtl_shangchuantupianhuoshipin.png"
                mode=""
              ></image>
              <view class="up_text"> 上传图片 </view>
            </view>
          </u-upload>
        </view>

        <view class="props_up">
          <u-upload
            :use-before-read="true"
            :fileList="fileList2"
            @afterRead="afterRead($event, 2)"
            @beforeRead="beforeRead"
            name="1"
            :previewImage="false"
            accept="video"
          >
            <view class="up">
              <image
                style="width: 48rpx; height: 48rpx"
                src="@/static/images/icon_cjtl_shangchuantupianhuoshipin.png"
                mode=""
              ></image>
              <view class="up_text"> 上传视频 </view>
            </view>
          </u-upload>
        </view>
      </view>

       <!-- 上传文件预览区域 -->
       <view class="preview_box">
          <view
            class="preview_box_item"
            v-for="(imgItem, ind) in fileList"
            :key="ind"
          >
            <!-- 展示图 -->
            <image
              :src="imgItem.url"
              class="file_image"
              v-if="imgItem.type == 'image'"
            ></image>
            <!-- 展示视频 -->
            <view
              v-if="imgItem.type == 'video'"
              @click="playVideo(imgItem.url)"
            >
              <image :src="imgItem.url_img" class="file_image"></image>
              <view class="video_cover">
                <view class="video_cover_play">
                  <image src="@/static/images/icon_dtym_bofang.png"></image>
                </view>
              </view>
            </view>

            <!-- 删除图标 -->
            <view class="del_image_box">
              <image
                src="@/static/images/my/icon_sczp_shanchu.png"
                class="del_image"
                @click.stop="deletePic(ind)"
              ></image>
            </view>
          </view>
        </view>

      <view class="fill_text">
        <view class=""> 1、视频文件过大时压缩时间较长，请耐心等待 </view>
        <view class=""> 2、若出现黑屏，请清理手机内存 </view>
        <view class="">
          3、建议您调整手机拍摄清晰度选择720p及以下的规格进行拍摄
        </view>
      </view>

      <view style="height:200rpx"></view>
      <view class="btn">
        <view class="box_btn" @click="goPage(detail)"> 确认打卡 </view>
      </view>
    </u--form>

    <!-- 退出弹框 -->
    <u-modal
      :show="showMod"
      :title="limitTitle"
      width="540rpx"
      :showCancelButton="true"
      confirmColor="#55B877"
      :closeOnClickOverlay="true"
      @confirm="confirm"
      @cancel="showMod = false"
      @close="showMod = false"
    >
      <view class="slot-content">
        <view>是否确认退出编辑？</view>
        <view>退出编辑后内容将会被清空！</view>
      </view>
    </u-modal>
	<floatingBall></floatingBall>
  </view>
</template>

<script>
import config from "@/config"; // 配置文件
import storage from "@/common/storage.js"; // 缓存封装
export default {
  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      model1: {
        userInfo: {
          group: "请选择",
          title: "",
          content: "",
        },
      },
      show: false,
      fileList: [],
      fileList1: [],
      fileList2: [],
      showMod: false,
      limitTitle: "提示",
      detail: {},
      file_id: [],
      flag: 1,
      upVideo: true, // 是否允许继续上传
    };
  },
  onLoad(options) {
    this.detail = JSON.parse(options.detail);
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度

    this.statusBarHeight = statusBarHeight.statusBarHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
        })
        .exec();
    });
  },
  methods: {
    toBack() {
      this.showMod = true;
    },
    // 播放视频
    playVideo(url) {
      // console.log(1111111111111);
      uni.navigateTo({
        url: `/components/preview?type=false&vimg=${url}`,
      });
      // e.preventDefault(); // 阻止按钮的默认点击行为
      // console.log("点击事件被阻止");
    },
    // 删除图片
    deletePic(index) {
      // this[`fileList${event.name}`].splice(event.index, 1);
      this.fileList.splice(index, 1);
      this.file_id.splice(index, 1);
      console.log(this.file_id, "id数组");
      console.log(this.fileList, "展示数组");
    },
    // 新增图片/视频之前的操作
    beforeRead() {
      if (this.file_id.length < 9) {
        this.upVideo = true;
      } else {
        this.upVideo = false;
      }
      console.log("上传之前");
    },
    // 新增图片/视频
    async afterRead(event, index) {
      if (!this.upVideo) {
        return uni.$u.toast("上传数量已达上限");
      }
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        let result;
        if (index == 1) {
          // 图片
          result = await this.uploadFilePromise(lists[i].url);
        } else {
          // 视频
          result = await this.uploadFilePromiseVideo(lists[i].url);
        }

        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
      console.log("上传完安");
    },
    // 上传图片
    uploadFilePromise(url) {
      let that = this;
      let token = storage.get("token");
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: config.uni_app_web_api_url + "/api/upload/image", // 仅为示例，非真实的接口地址
          filePath: url,
          name: "file",
          formData: {
            user: "test",
          },
          header: {
            "Access-Token": token,
          },
          success: (res) => {
            const data = JSON.parse(res.data);
            that.file_id.push(data.data.fileInfo.file_id);
            that.fileList.push({
              url: data.data.fileInfo.external_url,
              type: "image",
            });
            console.log(that.file_id, "id数组");
            console.log(that.fileList, "展示数组");
            resolve(res.data.data);
          },
        });
      });
    },

    // 上传视频
    uploadFilePromiseVideo(url) {
      let that = this;
      let token = storage.get("token");
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: config.uni_app_web_api_url + "/api/upload/video", // 仅为示例，非真实的接口地址
          filePath: url,
          name: "file",
          formData: {
            user: "test",
          },
          header: {
            "Access-Token": token,
          },
          success: (res) => {
            const data = JSON.parse(res.data);
            that.file_id.push(data.data.fileInfo.file_id);
            that.fileList.push({
              url: data.data.fileInfo.external_url,
              type: "video",
              url_img: data.data.fileInfo.url_img,
            });
            console.log(data, "res");
            console.log(that.file_id, "id数组");
            console.log(that.fileList, "展示数组");
            resolve(res.data.data);
          },
        });
      });
    },
    confirm() {
      // uni.$u.toast("确定啦");
      this.showMod = false;
      uni.navigateBack({
        delta: 1,
      });
    },
    goPage(detail) {
      this.$http
        .xunlianyingDaka({
          id: this.detail.id,
          content: this.model1.userInfo.content,
          file_id: this.file_id.join(","),
        })
        .then((res) => {
          //   this.detail = res.data.detail;
          uni.$u.toast(res.message);
          console.log(res, "打卡");
          setTimeout(() => {
            uni.redirectTo({
              url: `/pages/training/clockDetail?id=${detail.id}`,
            });
          }, 1000);
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
  .slot-content {
    view {
      display: flex;
      justify-content: center;
    }
  }
}

.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;

  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
    color: #55b877;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #444444;
  }
}

.picker_fill {
  display: flex;
  margin-left: 420rpx;
}
.form_view {
  padding: 0 30rpx;
  .title {
    padding: 32rpx 0;
    border-bottom: 1rpx solid #eee;
    .title_top {
      font-size: 32rpx;
      color: #444444;
    }
    .title_time {
      font-size: 24rpx;
      color: #888888;
      margin-top: 8rpx;
    }
  }
  .u-textarea {
    padding: 0;
  }
}
.props {
  width: 100%;
  margin-top: 28rpx;
  border-bottom: 1rpx solid #eee;
  padding-bottom: 32rpx;
  display: flex;
  .props_text {
    font-size: 24rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #adadad;
  }

  .props_up {
    margin-top: 24rpx;

    .up {
      width: 156rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .up_text {
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #888888;
      margin-top: 12rpx;
    }
  }
}

.preview_box {
  margin-top: 40rpx;
  .preview_box_item {
    width: 222rpx;
    height: 222rpx;
    display: inline-block;
    margin-right: 10rpx;
    margin-bottom: 10rpx;
    position: relative;
    .file_image {
      width: 222rpx;
      height: 222rpx;
      /deep/.uni-video-cover-duration {
        display: none;
      }
      /deep/ .uni-video-cover {
        display: none;
      }
    }
    .video_cover {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(1, 1, 1, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      .video_cover_play {
        width: 80rpx;
        height: 80rpx;
        image {
          width: 80rpx;
          height: 80rpx;
        }
      }
    }
    .del_image_box {
      z-index: 100;
      width: 32rpx;
      height: 32rpx;
      position: absolute;
      right: 0;
      top: 0;
      background: rgba(68, 68, 68, 0.3);
      .del_image {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
  .preview_box_item:nth-child(3n) {
    margin-right: 0;
  }
}

.fill_text {
  width: 100%;
  margin-top: 32rpx;
  font-size: 24rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  color: #888888;
  line-height: 40rpx;
}

.btn {
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
  position: fixed;
  bottom: 80rpx;
  left: 0;

  .box_btn {
    width: 100%;
    height: 96rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(360deg, #50b674 0%, #aeddbd 100%);
    border-radius: 48rpx;
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }
}

/deep/.u-form-item__body__right__message {
  display: flex !important;
  flex-direction: row-reverse !important;
}
</style>